<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shell调度</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../static/css/element-ui-2.6.14.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/highcharts/9.1.2/css/highcharts.min.css">
</head>
<body>

<div id="app">
    <el-row v-for="row in rows">
        <el-col :span="12" v-for="col in cols">
            <div v-bind:id="getBase64Id(row,col)">
                <!--{{serverNodes[(row-1) * cols + col-1]}}-->
            </div>
        </el-col>
    </el-row>
</div>

<script type="text/javascript" src="../static/js/vue.min-2.6.14.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highcharts/9.1.2/highcharts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/highcharts/9.1.2/modules/exporting.min.js"></script>
<!-- 引入组件库 -->
<script src="../static/js/element-ui-2.15.6.js"></script>
<script src="../static/js/axios.min.js"></script>
<script src="../static/js/app.js"></script>
<script>

    new Vue({
        el: '#app',
        data:{
            serverNodes:[],
            cpuMem:{},
            rows:0,
            cols:2,
            timeout:1000
        },
        created(){
            this.initServerNodes();

        },
        mounted(){
            this.initCpuMemInfo();
        },
        methods: {
            getBase64Id(row,col){
                let server = this.serverNodes[(row-1) * this.cols + col-1];
                if (server){
                    return window.btoa(server.server);
                }
                return 'unknown'
            },
            initServerNodes(){
                axios.get(domain + "/sysServerNode/getAllServerNodeInfo").then(resp=>{
                    let len = resp.data.data.length;
                    this.rows = Math.ceil(len / this.cols);
                    this.serverNodes = resp.data.data;
                    for(let index in this.serverNodes){
                        if(this.serverNodes[index].cpu){
                            this.cpuMem[this.serverNodes[index].server + "/cpu"] = this.serverNodes[index].cpu;
                        }
                        if(this.serverNodes[index].mem){
                            this.cpuMem[this.serverNodes[index].server + "/mem"] = this.serverNodes[index].mem;
                        }
                    }
                })
            },
            initCpuMemInfo(){
                axios.get(domain + "/sysInfo/getAllCpuMemInfoActualTime").then(resp=>{
                    Highcharts.setOptions({
                       global: {
                           useUTC: false //关闭UTC
                       }
                   });
                    let servers = resp.data.data;
                    for (let key in servers){
                        let serverData = servers[key];
                        if(serverData.length != 0){
                            this.dealChartData(key, serverData);
                        }
                    }

                })
            },
            dealChartData(server,data){
                let highChartId = window.btoa(server);
                let cpuPoint = [];
                let memPoint = [];
                cpuPoint.push(data[0]['t']);
                cpuPoint.push(data[0]['c']);
                memPoint.push(data[0]['t']);
                memPoint.push(data[0]['m']);
                this.initChart(highChartId,server,cpuPoint,memPoint,this);
            },

            initChart(highChartId,server,cpuPoint,memPoint,v){
                Highcharts.chart(highChartId, {
                    chart: {
                        type: 'spline',
                        marginRight: 10,
                        events: {
                            load: function () {
                                var series0 = this.series[0],
                                    series1 = this.series[1],
                                    chart = this;
                                setInterval(()=>{
                                    series0.addPoint(cpuPoint, false, true);
                                    series1.addPoint(memPoint, true, true);
                                    axios.get(domain + "/sysInfo/getCpuMemInfoActualTimeByServer",{
                                        params:{
                                            server:server
                                        }
                                    }).then(resp=>{
                                        let serverData = resp.data.data;
                                        cpuPoint = [];
                                        memPoint = [];
                                        if (serverData != ''){
                                            cpuPoint.push(serverData['t']);
                                            cpuPoint.push(serverData['c']);
                                            memPoint.push(serverData['t']);
                                            memPoint.push(serverData['m']);
                                        }

                                    })
                                }, v.timeout);
                            }
                        }
                    },
                    credits:{
                        enabled:false
                    },
                    title: {
                        text: server
                    },
                    subtitle: {
                        text: "Cpu："+ v.cpuMem[server+"/cpu"] + ". &nbsp;&nbsp;&nbsp;Mem：" + v.cpuMem[server+"/mem"]
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: '百分比'
                        }
                    },
                    legend: {
                        enabled: true
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    legend: {
                        enabled: true
                    },
                    series: [{
                        name: 'Cpu使用率',
                        data: (function () {
                            // 生成随机值
                            let data = [],
                                time = (new Date()).getTime(),
                                i;
                            for (i = -19; i <= 0; i += 1) {
                                data.push({
                                    x: time + i * 1000,
                                    y: 0
                                });
                            }
                            return data;
                        }())
                    },{
                        name: '内存使用率',
                        data: (function () {
                            // 生成随机值
                            let data = [],
                                time = (new Date()).getTime(),
                                i;
                            for (i = -19; i <= 0; i += 1) {
                                data.push({
                                    x: time + i * 1000,
                                    y: 0
                                });
                            }
                            return data;
                        }())
                    }]
                });
            }
        }
    })

</script>
</body>
</html>
